<template>
  <div class="container">
    <el-card>
      <sub-search @search="onSearch" @clear="onClear" @add="onAdd" title="目录" />
      <el-alert style="margin-bottom: 10px" type="info" show-icon :closable="false">
        <span slot="title">数据一共 {{ totalNum }} 条</span>
      </el-alert>
      <el-table :data="listDate" style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="subjectName" label="所属学科" />
        <el-table-column prop="directoryName" label="目录名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" width="200">
          <span slot-scope="{ row }">{{ row.addDate | parseTimeByString }}</span>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" />
        <el-table-column prop="state" label="状态">
          <span slot-scope="{ row }">{{ stateMap[row.state] }}</span>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="{ row }">
            <el-button @click="changeState(row)" type="text" size="small">{{ row.state? '禁用' : '启用' }}</el-button>
            <el-button @click="onEdit(row)" :disabled="checkAble(row.state)" type="text" size="small">修改</el-button>
            <el-button @click="onRemove(row)" :disabled="checkAble(row.state)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px">
        <el-col :span="10">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageSetting.page"
            :page-size="pageSetting.pagesize"
            :page-sizes="[5, 10]"
            layout="prev, pager, next, sizes, jumper"
            :total="totalNum"
          />
        </el-col>
      </el-row>
      <direct-dialog :show-dialog.sync="showDialog" :directInfo="directInfo" @refresh="getDirectoryList" />
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys'
import subSearch from '../components/subjects-search.vue'
import directDialog from '../components/directorys-add.vue'
export default {
  components: {
    subSearch,
    directDialog
  },
  data () {
    return {
      pageSetting: {
        page: 1,
        pagesize: 5
      },
      stateMap: ['已禁用', '已启用'], // 0禁用,1启用
      totalNum: 0,
      listDate: [],
      showDialog: false,
      directInfo: {}
    }
  },
  created () {
    // this.pageSetting.directoryName = this.$route.params.name || ''
    if (this.$route.query.id) {
      this.pageSetting.subjectID = this.$route.query.id
    }
    this.getDirectoryList()
  },
  watch: {
    showDialog (val) {
      if (!val) {
        this.directInfo = {}
      }
    }
  },
  methods: {
    async getDirectoryList () {
      const { data } = await list(this.pageSetting)
      if (data.items.length === 0 && this.pageSetting.page !== 1) {
        --this.pageSetting.page
        const res = await list(this.pageSetting)
        this.listDate = res.data.items
        this.totalNum = res.data.counts
      } else {
        this.listDate = data.items
        this.totalNum = data.counts
      }
    },
    async changeState (row) {
      const data = {
        id: row.id,
        state: row.state ? 0 : 1
      }
      const res = await changeState(data)
      if (res.data.success) {
        this.listDate.filter((item) => {
          if (item.id === row.id) {
            item.state === 1 ? (item.state = 0) : (item.state = 1)
          }
        })
      } else {
        this.$message.error('更改失败')
      }
    },
    async onSearch (keywords) {
      const key = { ...this.pageSetting, ...keywords }
      console.log(key)
      const { data } = await list(key)
      // console.log(data)
      this.listDate = data.items
      this.totalNum = data.counts
    },
    onClear () {
      // 只清空不刷新页面，方法未调用
      this.getDirectoryList()
    },
    onAdd () {
      this.showDialog = true
    },
    onRemove (row) {
      this.$confirm('确定删除该目录?')
        .then(async () => {
          // 点击了确定
          const res = await remove(row)
          if (res.data.success) {
            this.$message.success('删除成功')
            this.getDirectoryList() // 重新拉取数据
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({ message: '取消删除', type: 'info', duration: 1000 })
        })
    },
    onEdit (row) {
      this.directInfo = {
        id: row.id,
        subjectID: +row.subjectID,
        directoryName: row.directoryName
      }
      this.showDialog = true
    },
    handleSizeChange (val) {
      this.pageSetting.pagesize = val
      this.getDirectoryList()
    },
    handleCurrentChange (val) {
      this.pageSetting.page = val
      this.getDirectoryList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 20px 20px;
}
</style>
